<template>
  <div class="Census">
    <div style="background-image: linear-gradient(-90deg, #1469fe 0%,  #2775fd 100%); 
      position: relative; overflow: hidden;" :style="$store.getters.ifSales ? 'height: 2.94rem;' : 'height: 3.94rem;'">
      <div class="header-nav" v-if="!$store.getters.ifSales">
        <div v-for="item in nav" :key="item.value" :class="{ active: 0 == item.value }" @click="$emit('change', item.value)">{{ item.label }}</div>
      </div>
      <div class="header-btn" v-if="!$store.getters.ifSales" @click="$router.push({ name: 'DayBill' })">每日账单</div>
      <div style="text-align: center; margin-top: 0.6rem; font-size: 14px; color: #c5d6fe;">今日总流水额(元)</div>
      <div style="font-size: 0.8rem; color: #ffffff; font-weight: bold; text-align: center; margin-top: 0.2rem;">{{ totalMoney }}</div>
    </div>
    <van-grid :column-num="3" :border="false">
      <van-grid-item v-for="item in money" :key="item.label">
        <div style="text-align: center; font-size: 12px; color: #666;">
          <div style="margin-bottom: 0.2rem;">{{ item.label }}</div>
          <div style="color: #1c55f5; font-size: 0.45rem; font-weight: bold;">{{ item.value }}</div>
        </div>
      </van-grid-item>
    </van-grid>
    <div class="census-item" style="padding-bottom: 0.3rem;">
      <div class="census-item-header">设备运营数据</div>
      <div class="info-row" v-for="item in device" :key="item.label" @click="goDevicePage(item)">
        <img :src="`./img/${ item.img }`"/>
        <div class="label">{{ item.label }}</div>
        <div class="value">{{ item.value }}</div>
        <img class="right" :src="`./img/right.png`" v-if="item.type >= 0"/>
      </div>
    </div>
    <!-- <div class="census-item">
      <div class="census-item-header">用户分析</div>
    </div>
    <div class="census-item">
      <div class="census-item-header">消费数据分析</div>
    </div> -->
    <!-- <day-bill ref="daybill"></day-bill> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: [
        { label: '我的数据', value: 0 },
        // { label: '租借统计', value: 1 }
      ],

      totalMoney: 0,
      money: [],

      device: [
        { img: '1.png', label: '总设备数', value: 0, key: 'allShebei', type: 0 },
        { img: '2.png', label: '在线设备数', value: 0, key: 'onLines', type: 0 },
        { img: '3.png', label: '离线设备数', value: 0, key: 'offLine', type: 1 },
        { img: '4.png', label: '未绑定设备数', value: 0, key: 'notBinding', type: 2 },
        // { img: '5.png', label: '故障设备数', value: 0, key: 'fault', type: 3 },
        // { img: '6.png', label: '投放宝总量', value: 0, key: 'device' },
        // { img: '7.png', label: '借宝数量', value: 0, key: 'device' },
      ]
    };
  },
  methods: {
    getMoneyData() {
      this.$axios.get('/api/orderFormController/incomeInfo', {
        userId: this.$store.state.userInfo.userId,
        date: new Date().format('yyyy-MM-dd')
      }).then(res => {
        this.totalMoney = res.totalIncome;
        let money = [];
        if (this.$store.getters.ifSales) {
        }
        if (this.$store.getters.ifSales) {
          this.$axios.get('/api/orderFormController/salesmanOrderStatics', {
            userId: this.$store.state.userInfo.userId
          }).then(order => {
            res = { ...res, ...order };
            money = [
              { label: '总支付订单', value: 0, key: 'totalOrderNum' },
              { label: '微信支付订单', value: 0, key: 'wxOrderNum' },
              { label: '支付宝支付订单', value: 0, key: 'zfbOrderNum' },
              { label: '进行中订单', value: 0, key: 'rentingNum' },
              { label: '已归还订单', value: 0, key: 'returnedNum' },
              { label: '已取消订单', value: 0, key: 'canceledNum' }
            ];
            money.forEach(ele => {
              ele.value = res[ele.key];
            });
            this.money = money;
          });
        } else {
          money = [
            { label: '实际收益(元)', value: 0, key: 'realIncome' },
            { label: '微信流水(元)', value: 0, key: 'wxIncome' },
            { label: '支付宝流水(元)', value: 0, key: 'zfbIncome' },
            { label: '总支付订单', value: 0, key: 'totalOrderNum' },
            { label: '微信支付订单', value: 0, key: 'wxOrderNum' },
            { label: '支付宝支付订单', value: 0, key: 'zfbOrderNum' }
          ];
          money.forEach(ele => {
            ele.value = res[ele.key];
          });
          this.money = money;
        }
      });
    },
    getDeviceData() {
      this.$axios.get('/api/chargerPlaEquipmentController/getAllEquipmentStatus', { 
        userId: this.$store.state.userInfo.userId
      }).then(res => {
        res.allShebei = res.isBinding + res.notBinding;
        let device = JSON.parse(JSON.stringify(this.device));
        device.forEach(ele => {
          ele.value = res[ele.key];
        });
        this.device = device;
      });
    },
    goDevicePage(item) {
      if (item.type >= 0) {
        this.$router.push({
          name: 'Device',
          query: { type: item.type }
        });
      }
    },

  },
  mounted() { 
    if (this.$store.getters.ifIntroducer) {
      this.nav = [{ label: '我的数据', value: 0 }];
      this.device = [
        { img: '1.png', label: '总设备数', value: 0, key: 'allShebei', type: 0 },
        { img: '2.png', label: '在线设备数', value: 0, key: 'onLines', type: 0 },
        { img: '3.png', label: '离线设备数', value: 0, key: 'offLine', type: 1 }
      ];
    }
    if (this.$route.name == 'Census') {
      this.getMoneyData();
      this.getDeviceData();
    }
  }
};
</script>
